<!--
 * @file 过滤条件面板组件
 * @description 用于设备搜索和状态过滤功能
 * @date 2024-04-01
 -->
<template>
  <view class="filter-panel">
    <!-- 搜索框 -->
    <view class="search-box">
      <input 
        type="text" 
        class="search-input" 
        placeholder="请输入关键字"
        v-model="keyword"
        @input="handleSearchInput"
      />
      <text class="iconfont icon-search"></text>
    </view>
    
    <!-- 设备状态标签 -->
    <view class="status-tabs">
      <view 
        class="tab-item" 
        :class="{ 'tab-item--active': activeStatus === -1 }"
        @click="handleStatusChange(-1)"
      >
        全部({{ total }})
      </view>
      <view 
        class="tab-item"
        :class="{ 'tab-item--active': activeStatus === 1 }"
        @click="handleStatusChange(1)"
      >
        在线({{ onlineCount }})
      </view>
      <view 
        class="tab-item"
        :class="{ 'tab-item--active': activeStatus === 0 }"
        @click="handleStatusChange(0)"
      >
        离线({{ total - onlineCount }})
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
// @ts-ignore
import { ref, watch } from 'vue';

// 定义组件属性
interface Props {
  /** 设备总数 */
  total: number;
  /** 在线设备数量 */
  onlineCount: number;
  /** 当前状态过滤值 -1=全部, 0=离线, 1=在线 */
  status: number;
  /** 搜索关键字 */
  searchKeyword: string;
}

const props = withDefaults(defineProps<Props>(), {
  total: 0,
  onlineCount: 0,
  status: -1,
  searchKeyword: ''
});

// 定义事件 - 使用函数调用签名
const emit = defineEmits<{
  (e: 'update:searchKeyword', value: string): void;
  (e: 'update:status', status: number): void;
  (e: 'search', keyword: string): void;
  (e: 'status-filter', status: number): void;
}>();

// 内部状态
const keyword = ref(props.searchKeyword);
const activeStatus = ref(props.status);

// 监听props变化
watch(() => props.searchKeyword, (newVal: string) => {
  keyword.value = newVal;
});

watch(() => props.status, (newVal: number) => {
  activeStatus.value = newVal;
});

// 方法
function handleSearchInput(): void {
  emit('update:searchKeyword', keyword.value);
  emit('search', keyword.value);
}

function handleStatusChange(status: number): void {
  activeStatus.value = status;
  emit('update:status', status);
  emit('status-filter', status);
}
</script>

<style lang="scss" scoped>
.filter-panel {
  display: flex;
  flex-direction: column;
  
  .search-box {
    position: relative;
    width: 100%;
    padding: 12px;
    
    .search-input {
      width: 100%;
      height: 36px;
      padding: 0 36px 0 12px;
      background-color: #fff;
      border-radius: 4px;
      border: 1px solid #e8e8e8;
      font-size: 14px;
      
      &:focus {
        border-color: #00aaff;
      }
    }
    
    .icon-search {
      position: absolute;
      right: 24px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
      font-size: 16px;
    }
  }

  .status-tabs {
    display: flex;
    padding: 0 12px;
    border-bottom: 2px solid #00aaff;
    
    .tab-item {
      padding: 8px 16px;
      color: #666;
      font-size: 14px;
      cursor: pointer;
      
      &--active {
        color: #00aaff;
        font-weight: 500;
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          bottom: -2px;
          left: 0;
          width: 100%;
          height: 2px;
          background-color: #00aaff;
        }
      }
    }
  }
}
</style> 